<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useProfileStore } from '@/stores/profile'
import { useUserStore } from '@/stores/user'
import CustomTabBar from '@/components/CustomTabBar.vue';

const API_BASE_URL = 'https://52d47b77.r34.cpolar.top'
const profileStore = useProfileStore()
const userStore = useUserStore()

const menuList = [
  {src:'/static/dingdan.png', label: '我的订单' },
  {src:'/static/shoucang.png', label: '收藏夹' },
  // {src:'/static/shezhi.png', label: '账号设置' },
  // {src:'/static/dingdan.png', label: '消息通知' },
  // {src:'/static/help.png', label: '帮助与支持' },
]

// 处理登录
const handleLogin = () => {
  // #ifdef MP-WEIXIN
  if (userStore.userInfo?.is_wechat_bound) {
    uni.showToast({
      title: '您已绑定微信',
      icon: 'none'
    })
    return
  }
    uni.navigateTo({
    url: '/pages/login/login'
  })
  // #endif
 // #ifdef H5
  uni.navigateTo({
    url: '/pages/login/phone'
  })
 // #endif
}
// 绑定微信
// const bindWeChat = () => {
//   // #ifdef H5
//   uni.login({
//     provider: 'weixin',
//     success: (loginRes) => {
//       if (loginRes.code) {
//         uni.request({
//           url: `${API_BASE_URL}/wechat/bind/`,
//           method: 'POST',
//           data: {
//             code: loginRes.code
//           },
//           header: {
//             'Authorization': `Bearer ${userStore.userInfo?.access_token}`,
//             'content-type': 'application/json'
//           },
//           success: (res: any) => {
//             if (res.data?.status === 'success') {
//               uni.showToast({
//                 title: '微信绑定成功',
//                 icon: 'success'
//               })
//               // 更新绑定状态
//               if (userStore.userInfo) {
//                 const updatedUserInfo = {
//                   ...userStore.userInfo,
//                   is_wechat_bound: true
//                 }
//                 userStore.$patch({ userInfo: updatedUserInfo })
//               }
//             } else {
//               uni.showToast({
//                 title: res.data?.message || '绑定失败',
//                 icon: 'none'
//               })
//             }
//           },
//           fail: (err) => {
//             console.error('微信绑定失败:', err)
//             uni.showToast({
//               title: '网络错误',
//               icon: 'none'
//             })
//           }
//         })
//       }
//     },
//     fail: (err) => {
//       console.error('微信登录失败:', err)
//       uni.showToast({
//         title: '微信登录失败',
//         icon: 'none'
//       })
//     }
//   })
//   // #endif

// }
// 编辑资料

  // 跳转到手机号登录页面


// 处理退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除用户信息
        userStore.$reset()
        // 清除本地存储
        uni.removeStorageSync('userInfo')
        uni.removeStorageSync('token')
        // 显示提示
        uni.showToast({
          title: '已退出登录',
          icon: 'success'
        })
      }
    }
  })
}
// 跳转页面
const gotoPage=(index:number)=>{
if(index===0){
  uni.navigateTo({
       url: '/pages/MyOrder/MyOrders'
  })
}else if(index===1){
  uni.navigateTo({
       url: '/pages/shoucang/shoucang'
  })
}else if(index===2){
  // uni.navigateTo({
  //      url: '/pages/Myinfo/MyOrders'
  // })
}else{

}
}
</script>

<template>
  <view class="container">
    <!-- <image class="bg-image" src="/static/myinfo-bg.png" mode="aspectFill" /> -->
    <view class="content">
      <!-- 头像和昵称 -->
      <view class="avatar-block">
        <image
          class="avatar"
          :src="userStore.userInfo?.avatarUrl||''"
          mode="aspectFill"
        />
        <view class="nickname">{{ userStore.userInfo?.nickname || '未登录' }}</view>
      </view>
      <!-- 菜单卡片 -->
      <view class="menu-card">
        <view class="menu-item" v-for="(item,index) in menuList" :key="item.label" @click="gotoPage(index)">
          <view class="icon-placeholder">
            <image
              :src="item.src"
              style="width: 35rpx; margin-right: 24rpx;height: 35rpx;"
            />
          </view>
          <view class="menu-label">{{ item.label }}</view>
          <view class="menu-arrow">></view>
        </view>
      </view>
      <!-- 退出/登录按钮 -->
      <button
        class="action-btn"
        @tap="userStore.checkLoginStatus() ? handleLogout(): handleLogin()"
      >
        {{ userStore.checkLoginStatus() ? '退出登录' : '一键登录' }}
      </button>
    </view>
    <CustomTabBar />
  </view>
</template>

<style>
.container {
  min-height: 100vh;
  position: relative;
  padding-bottom: 120rpx;
  box-sizing: border-box;
  background: #10182a;
}

.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
  padding: 60rpx 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background: #2c3440;
  margin-bottom: 20rpx;
}

.nickname {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.menu-card {
  width: 90%;
  background: rgba(255,255,255,0.06);
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.08);
  margin-bottom: 40rpx;
  padding: 0 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 32rpx 30rpx;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.menu-item:last-child {
  border-bottom: none;
}

.icon-placeholder {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  /* background: rgba(255,255,255,0.15); */
  margin-right: 24rpx;
}

.menu-label {
  flex: 1;
  color: #fff;
  font-size: 28rpx;
}

.menu-arrow {
  color: #fff;
  font-size: 32rpx;
  opacity: 0.4;
}

.action-btn {
  width: 90%;
  height: 88rpx;
  background: #232a36;
  color: #fff;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10rpx;
  border: none;
}

.action-btn:active {
  opacity: 0.8;
}
</style>
